<template>
  <!-- ------------------------------------------住宿信息------------------------------ -->
  <div class="descriptions__title">住宿信息</div>
  <el-row>
    <el-col :span="24">
      <el-card>
        <!-- <span style="left: 360px;"> -->
        <span style="margin-left: 36%;">我住在{{ DormitoryNote?.dormitoryBuild }}楼{{
          DormitoryNote?.dormitoryNumber
        }}，</span>
        <span>寝室考核获奖{{ DormitoryNote?.rewardCount }}次，警告{{
          DormitoryNote?.warningCount
        }}次</span>

        <!-- <span>{{ DormitoryNote?.dormitoryBuilding }}</span>
                <span>{{ DormitoryNote?.dormitoryNumber }}</span> -->
      </el-card>
      <!-- <div class="grid-content ep-bg-purple-dark"/> -->
      <div class="grid-content ep-bg-purple-dark"></div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="12" style="margin-top: 20px">
      <el-card class="box-card" style="margin-right: 20px; height: 200px">
        <div class="abc">
          <img src="../../assets/R-C.png" alt="" />
          <div class="activityinfo">
            <span class="number">获奖</span>
            <span class="act">{{ DormitoryNote?.rewardCount }}</span>
            <span class="number">次</span>
          </div>
        </div>
      </el-card>
      <!-- <div class="grid-content ep-bg-purple" />-->
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="12" style="margin-top: 20px">
      <el-card class="box-card" style="height: 200px">
        <div class="abc">
          <img src="../../assets/JG.jpg" alt="" />
          <div class="activityinfo">
            <span class="number">警告</span>
            <span class="act">{{ DormitoryNote?.warningCount }}</span>
            <span class="number">次</span>
          </div>
        </div>
      </el-card>
      <!-- <div class="grid-content ep-bg-purple-light" /> -->
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>
  </el-row>

  <el-card style="margin-top: 20px; min-height: 200px">
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="rewardTime" label="考核时间" width="300" />
      <el-table-column prop="rewardType" label="类型" width="300" />
      <el-table-column prop="rewardExplain" label="说明" />
    </el-table>
  </el-card>
  <el-pagination layout="prev, pager, next" @current-change="handleCurrentChangeInfo" :page-size="info.pageSize"
    :total="info.total"> </el-pagination>
  <!-- ------------------------------------------室友信息------------------------------ -->
  <div class="descriptions__title">室友信息</div>

  <el-row v-if="boll">
    <el-col :span="8">
      <el-card class="box-card" style="height: 200px; margin-right: 20px">
        <div class="abc">
          <img src="../../assets/tx.png" alt="" />
          <div class="number">
            <span>{{ Roomies[0].className }}</span>
            <span style="margin-left: 10px;">{{ Roomies[0].nativePlace }}</span>
          </div>
        </div>
        <div>
          <span style="margin-left: 30px">{{ Roomies[0].stuName }}</span>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="8">
      <el-card class="box-card" style="height: 200px; margin-right: 20px">
        <div class="abc">
          <img src="../../assets/tx.png" alt="" />
          <div class="number">
            <span>{{ Roomies[1].className }}</span>
            <span>{{ Roomies[1].nativePlace }}</span>
          </div>
        </div>
        <div>
          <p style="margin-left: 30px">{{ Roomies[1].stuName }}</p>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>

    <el-col :span="8">
      <el-card class="box-card" style="height: 200px; margin-right: 20px">
        <div class="abc">
          <img src="../../assets/tx.png" alt="" />
          <div class="number">
            <span>{{ Roomies[2].className }}</span>
            <span>{{ Roomies[2].nativePlace }}</span>
          </div>
        </div>
        <div>
          <span style="margin-left: 30px">{{ Roomies[2].stuName }}</span>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>
  </el-row>
  <!-- ------------------------------------------归寝------------------------------ -->
  <div class="descriptions__title">归寝</div>

  <el-row>
    <el-col :span="8">
      <el-card class="box-card" style="margin-right: 5px">
        <div class="TX">
          <img src="../../assets/12.jpg" alt="" />
          <div>
            <span>本学期平均归寝时间：</span>
            <span>{{ BedNote?.newAverageTime }}</span>
          </div>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="8">
      <el-card class="box-card" style="margin-right: 5px">
        <div class="TX">
          <img src="../../assets/12.jpg" alt="" />
          <div>
            <span>本学期晚归：</span>
            <span>{{ BedNote?.lateCount }}次</span>
          </div>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>

    <el-col :span="8">
      <el-card class="box-card">
        <div class="TX">
          <img src="../../assets/12.jpg" alt="" />
          <div>
            <span>本学期未归：</span>
            <span>{{ BedNote?.notCount }}次</span>
          </div>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>
  </el-row>

  <el-row>
    <!-- <el-col :span="12" style="margin-top:20px ;">
            <el-card class="box-card" style="margin-right: 20px;height: 200px;">
                <h>折线图</h>
            </el-card>
            <div class="grid-content ep-bg-purple"></div>
        </el-col> -->
    <el-col :span="24" style="margin-top: 20px">
      <el-card class="box-card" style="height: 400px">
        <div style="text-align: center; font-weight: bold">饼图</div>
        <div id="myChart"></div>
      </el-card>
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>
  </el-row>

  <el-card style="margin-top: 20px; height: 300px">
    <el-table :data="tableData1" border stripe style="width: 100%">
      <el-table-column prop="bedDate" label="日期" width="300" />
      <el-table-column prop="bedType" label="类型" width="300" />
      <el-table-column prop="bedTime" label="归寝时间" />
    </el-table>
  </el-card>
  <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="tableDataPage.pageSize"
    :total="tableDataPage.total"> </el-pagination>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'
import { getRoomie, getStudentInfo, getBed, getDormitory, getCanvas } from '@/api/student'

const route = useRoute()
onMounted(() => {
  console.log()
  getCanvas(route.params.id).then((res) => {
    console.log(res.data.data)
    drawChart(res.data.data)
  })
})

const info = ref({
  pageNum: 1,
  pageSize: 5,
  type: 0,
})
const tableDataPage = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
})
// 画图表
function drawChart(data) {
  console.log(data)
  const chartContainer = document.getElementById('myChart')
  const chart = echarts.init(chartContainer)
  chart.setOption({
    title: {
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
}
//
getStudentInfo(route.params.id).then((res) => {
  const result = res.data.data
  info.value.classNum = result.classNum
  info.value.major = result.major
  info.value.stuName = result.stuName
  info.value.stuId = result.stuId
  tableDataPage.value.classNum = result.classNum
  tableDataPage.value.major = result.major
  tableDataPage.value.stuName = result.stuName
  tableDataPage.value.stuId = result.stuId
  DormitoryInfo()
  // deepCoachInfo()
  RoomieInfo()
  BedInfo()
  // workStudyInfo()
})

// 《--------------------------测试柱状图---------------------------》
const workStudyInfo = ref({})
function workStudy() {
  getWorkStudy(route.params.id).then((res) => {
    const data = res.data.data
    workStudyInfo.value = data
  })
}
//《--------------------------住宿信息---------------------------》
const DormitoryNote = ref({
  rewardCount: 3,
  dormitoryBuild: '2',
  warningCount: 1,
  dormitoryNumber: '411',
})
const handleCurrentChange = (val) => {
  tableDataPage.value.pageNum = val
  BedInfo()
}
const handleCurrentChangeInfo = (val) => {
  info.value.pageNum = val
  DormitoryInfo()
}
const Dormitory = ref({})
function DormitoryInfo() {
  getDormitory({ ...info.value }).then((res) => {
    tableData.value = res.data.data.data
    info.value.pageNum = res.data.data.page
    info.value.total = res.data.data.total
    Dormitory.value = res.data.data.data
    DormitoryNote.value = res.data.data.note
  })
}
//《--------------------------室友信息---------------------------》
const Roomie = ref({
  stuName: '杨意',
  major: '通信',
  classNum: '2101S',
  nativePlace: '上海',
  className: '通信2101S',
})

const Roomies = ref([])
const boll = ref(false)
function RoomieInfo() {
  getRoomie({ ...info.value }).then((res) => {
    Roomies.value = res.data.data
    boll.value = true
  })
}
//《--------------------------归寝---------------------------》
const BedNote = ref({
  newAverageTime: '22:15:34',
  notCount: 0,
  lateCount: 7,
})
const Bed = ref({})
function BedInfo() {
  getBed({ ...tableDataPage.value }).then((res) => {
    console.log(res)
    tableData1.value = res.data.data.data
    tableDataPage.value.pageNum = res.data.data.page
    tableDataPage.value.total = res.data.data.total
  })
}

const tableData = ref([])

const tableData1 = ref([])
</script>

<sstyle lang="scss" scoped>
.TX {
  display: flex;
  align-items: center;
  margin-left: 30px;

  img {
    width: 60px;
    height: 60px;
    margin-right: 30px;
  }
}

#myChart {
  margin: 0 auto;
  height: 390px;
}
</sstyle>
